<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <div class="topTitle">已读（{{ tableSignData.length }}）</div>
            <div class="table">
              <NDataTable striped :columns="signColumns" :data="tableSignData" :pagination="false" />
            </div>
            <div class="topTitle" style="margin: 10rem 0">
              未读（{{ tableNoSignData.length }}）
            </div>
            <div class="table">
              <NDataTable striped :bordered="true" :columns="noSignColumns" :data="tableNoSignData"
                :pagination="false" />
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="start">
      <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
        <template #icon>
          <img :src="VBackImg" style="width: 25rem; height: 25rem" />
        </template>
        返回
      </NButton>
    </NSpace>
  </FixedAction>
</template>
<script setup lang="ts">
import { NSpace, NButton, NScrollbar, NDataTable, NSpin, NImage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import router from '@/router'
import { onMounted, ref, watch } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { DisModel } from '@/api/receiveOrDispatch'
import { useRoute } from 'vue-router'
import VBackImg from '@/assets/images/back.png'

const tags = useTagStore().tags
const route = useRoute()

const signColumns: DataTableColumns = [
  {
    title: '人员',
    key: 'userName',
    width: 50
  },
  {
    title: '签收时间',
    key: 'updatedTime',
    width: 200
  }
]
const tableSignData: any = ref([])

const noSignColumns: DataTableColumns = [
  {
    title: '人员',
    key: 'userName'
  }
]
const tableNoSignData: any = ref([])

// 获取列表
const spinShow = ref(false)
const tableLoading = ref(false)
const getDispatchSignInfo = async () => {
  spinShow.value = true
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponse<DisModel[]>>({
    module: 'receiveOrDispatch',
    api: 'dispatchSignInfo',
    override: {
      params: {
        issueId: route.query.id as never
      }
    }
  })
  tableLoading.value = false
  spinShow.value = false
  if (error) return
  if (res.code !== 0) return
  tableSignData.value = []
  tableNoSignData.value = []
  res.data.map((it: any) => {
    if (it.signed == 1) return tableSignData.value.push(it)
    tableNoSignData.value.push(it)
  })
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

  tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
watch(
  () => route,
  () => {
    if (route.path == '/OA/ReceiveOrDispatch/DispatchSign' && route.query.id) getDispatchSignInfo()
  },
  { deep: true, immediate: true }
)
onMounted(() => { })
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;

      .table {
        width: 100%;
        background-color: #e1e1e1;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
